<template>
    <div class="slider-rate">
        <div class="slider-rate-line" :style="{ height: barHeight, 'border-radius': barRadius, 'background-color': rightColor }">
            <div class="slider-bar" :style="{ 'background-color': leftColor, width: modelValue + '%' }"></div>
            <span class="left-text">{{ leftText }}{{ modelValue }}%</span>
            <span class="right-text">{{ rightText }}{{ 100 - modelValue }}%</span>
        </div>
        <img
            src="@/assets/images/icon-hand.png"
            class="slider-hand"
            @touchstart="movestart($event)"
            @touchmove="moving($event)"
            @touchend="moveend($event)"
            :style="{ left: modelValue + '%' }"
            v-if="!readonly&&isSupportTouch"
        />
        <img src="@/assets/images/icon-hand.png" class="slider-hand" @mousedown="mousestart($event)" :style="{ left: modelValue + '%' }" v-if="!readonly&&!isSupportTouch" />
    </div>
</template>

<script>
import { ref } from "vue";
export default {
    name: "slider-rate",
    props: {
        readonly: Boolean,
        barHeight: {
            type: String,
            default: "16px",
        },
        barRadius: {
            type: String,
            default: "8px",
        },
        leftColor: {
            type: String,
            default: "#EB3838",
        },
        rightColor: {
            type: String,
            default: "#FFCE07",
        },
        leftText: {
            type: String,
            default: "优点",
        },
        rightText: {
            type: String,
            default: "缺点",
        },
        min: {
            type: Number,
            default: 0,
        },
        max: {
            type: Number,
            default: 100,
        },
        modelValue: {
            type: Number,
            default: 50,
        },
    },
    setup() {
        const isSupportTouch = "ontouchend" in document ? ref(true) : ref(false);
        return {
            isSupportTouch,
        };
    },
    data() {
        return {
            startX: 0,
            moveX: 0,
            parentWidth: 0,
            value: this.modelValue,
            startValue: 0,
            isMouseDown: false,
        };
    },
    watch: {
        value(newVal) {
            console.log('valuechange:',newVal);
            this.$emit("update:modelValue", newVal);
        },
        modelValue(newVal) {
            console.log('modelValue:',newVal);
            this.value = newVal;
        },
    },
    mounted(){
        console.log(this.value);
    },
    methods: {
        mousestart(event) {
            this.parentWidth = event.target.offsetParent.clientWidth;
            this.startValue = this.value;
            this.startX = event.clientX;
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
            document.onmousemove = (event) => {
                const move = event.clientX;
                this.moveX = move - this.startX;
                const moveNum = (this.moveX / this.parentWidth) * 100;
                const num = Number(this.startValue + moveNum).toFixed(0);
                if (this.moveX < 0) {
                    this.value = num >= 0 ? num : 0;
                } else {
                    this.value = num <= 100 ? num : 100;
                }
            };
            document.onmouseup = () => {
                this.startValue = this.value;
                document.onmousemove = null;
                document.onmouseup = null;
            };
        },
        movestart(event) {
            this.parentWidth = event.target.offsetParent.clientWidth;
            this.startValue = this.value;
            this.startX = event.targetTouches[0].clientX;
        },
        moving(event) {
            const move = event.targetTouches[0].clientX;
            this.moveX = move - this.startX;
            const moveNum = (this.moveX / this.parentWidth) * 100;
            const num = Number(Number(this.startValue + moveNum).toFixed(0));
            if (this.moveX < 0) {
                this.value = num >= 0 ? num : 0;
            } else {
                this.value = num <= 100 ? num : 100;
            }
        },
        moveend() {
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.slider-rate {
    position: relative;
    .slider-rate-line{
        position: relative;
        overflow: hidden;
    }
    .slider-bar {
        height: 100%;
        border-radius: inherit;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .left-text {
        color: #fff;
        font-size: 15px;
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
    .right-text {
        color: #fff;
        font-size: 15px;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
    .slider-hand {
        position: absolute;
        top: 10px;
        left: 0;
        z-index: 5;
        width: 30px;
        transform: translateX(-13px);
    }
}
</style>
